<html>
<script src="js/react.development.js"></script>
<body>
<div id="app"></div>
<script src="js/react.development.js"></script>
<script src="js/react-dom.development.js"></script>
<!--Babel-->
<script src="js/babel.min.js"></script>
<script type="text/jsx">


    function Logo() {
        return <img src="https://www.baidu.com/img/bd_logo1.png" alt="logo" style={{width: '50px', height: '50px'}}/>
    }

    function Title1({aa}) {
        console.log("=====>" + aa);
        return <h1>{`haha ${aa}`}</h1>;
    }

    function Title2({aa}) {

        return <h1>{createTitle(aa)}</h1>;
    }

    function createTitle(aa) {
        if (aa) {
            return aa;
        } else {
            return "default title";
        }
    }

    // 三元运算符修改内容
    function Title({aa}) {
        return <h1>{aa ? aa: "this is default title"}</h1>
    }

    function Navigation() {
        return (
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        );
    }

    function Header({title}) {
        console.log(title);
        return (
            <header>
                <Logo/>
                <Title aa={title}/>
                <Navigation/>
            </header>
        )
    }

    // Article 组件
    function Article() {
        return (
            <section>
                <h2>Article Title</h2>
                <p>This is the main content of the page.</p>
            </section>
        );
    }

    // Footer 组件
    function Footer() {
        return (
            <footer>
                <p>&copy; 2023 My Website. All rights reserved.</p>
            </footer>
        );
    }


    function Homepage() {
        return (
            <div>
                <Header title="hahahha"/>
                <Header title="very good"/>
                <Article/>
                <Footer/>
            </div>
        );
    }

    const app = document.getElementById('app');
    const root = ReactDOM.createRoot(app);
    root.render(<Homepage/>);
</script>
</body>
</html>
